<template>
  <div class="body">
    <div class="index">
      <Navbar/>
      <div class="info">
        <div class="desc">初心不改，意往无前</div>
      </div>
      <div class="down">
        <icon name="chevron-down" scale="1.5"/>
      </div>
    </div>
    <ListItem/>
    <Footer/>
  </div>
</template>

<script>
import '../assets/js/snow'
import Navbar from '../components/Navbar'
import ListItem from '../components/ListItem'
import Footer from '../components/Footer'
export default {
  name: 'Index',
  components: { Footer, ListItem, Navbar },
  mounted () {
    this.$http.get('api/image/rand').then(res => {
      if (res.code === 200) {
        document.getElementById('app').style.backgroundImage = 'url(' + res.data.image.link + ')'
        document.getElementById('app').style.backgroundColor = 'rgba(0, 0, 0, .2)'
        document.getElementById('app').style.backgroundPosition = 'center'
        document.getElementById('app').style.backgroundRepeat = 'no-repeat'
        document.getElementById('app').style.backgroundAttachment = 'fixed'
        document.getElementById('app').style.backgroundSize = 'auto 100%'
      }
    })
  }
}
</script>

<style scoped lang="scss">
  .body {
    width: 100%;
    height: 100%;
    box-shadow:inset 0px -60px 40px -20px #FFF;
    .index {
      width: 100%;
      height: 100%;
      .info {
        text-align: center;
        margin: 0 auto;
        position: relative;
        top: 55%;
        transform: translateY(-50%);
        .desc {
          font-size: 2.85em;
          font-family: 华文行楷,serif;
          color: #FFFFFF;
          text-shadow: 0.1rem 0.1rem 0.2rem rgb(0 0 0 / 15%);
        }
      }
      .down {
        text-align: center;
        margin: 0 auto;
        position: relative;
        top: 85%;
        transform: translateY(-50%);
        color: #EEEEEE;
      }
    }
  }
</style>
